<template>
	<div class="demand">

    <tab active-color = "#FF659B" custom-bar-width = "2rem">
      <tab-item :selected="(tabIndex === 1) ? true : false" @on-item-click="onItemClick(1)">付费音频</tab-item>
      <tab-item :selected="(tabIndex === 2) ? true : false" @on-item-click="onItemClick(2)">视频点播</tab-item>
    </tab>
    <div v-if="tabIndex == 1 && demands && demands.length > 0">
  		<div class="item-list" v-for="(item, index) in demands" :key="index" @click="router({path: '/payDetials', query: {id: item.pay_audio_id}})">
        <div class="img">
          <img v-if="item.img" :src="item.img">
        </div>
        <div class="con">
           <p class="tip">{{item.title}}</p>
           <p class="video-num">
            <span class="time">
              <img src="@/assets/yunbangkechen4.png"> {{item.audio_long}}
            </span>
           </p>
        </div>
      </div>
    </div>
    <div class="none" v-else-if="tabIndex == 1">
      <img src="@/assets/kongzhuangtai.png" alt="">
    </div>
    <div v-if="tabIndex == 2 && videoList && videoList.length>0" class="audio">	    	
	    <div class="item-list" v-for="(item, index) in videoList" :key="index" @click="router({path: '/videoDetails', query: {id: item.video.column_id}})">
	      <div class="img">
	        <img :src="item.video.img">
	        <div class="mask-bg"><img src="@/assets/liebiao.png" alt=""></div>
	      </div>
	      <div class="con">
	         <p class="tip">{{item.video.title}}</p>
	         <p class="video-num">
	          <span class="time">
	            <img src="@/assets/yunbangkechen4.png"> {{item.video.leng}}
	          </span>
	         </p>
	      </div>
	    </div>
    </div>
    <div class="none" v-else-if="tabIndex == 2">
      <img src="@/assets/kongzhuangtai.png" alt="">
    </div>
		<!-- <div v-if="demands && demands.length > 0">
			<div class="item-list" v-for="(item, index) in demands" :key="index" @click="router({path: '/payDetials', query: {id: item.pay_audio_id}})">
				<div class="img">
					<img v-if="item.img" :src="item.img">
				</div>
				<div class="con">
					 <p class="tip">{{item.title}}</p>
					 <p class="video-num">
					 	<span class="time">
					 		<img src="@/assets/yunbangkechen4.png"> {{item.audio_long}}
					 	</span>
					 </p>
				</div>
			</div>
		</div>
		<div class="none" v-else>
			<img src="@/assets/kongzhuangtai.png" alt="">
		</div> -->
	</div>
</template>
<script type="text/javascript">
import { Tab, TabItem } from 'vux'
import { audiopay_log, baseUrl, videoDemand } from '@/api/api'
	export default {
	  components: {
	    Tab,
	    TabItem
	  },
	  data () {
	    return {
	    	tabIndex: 1,
	    	demands: [],
        videoList: [],
	    	baseUrl,
	    }
	  },
	  created () {
			this.audiopay_logs()
      this.videoDemands()
	  },
	  methods: {
	    router (path) {
	      this.$router.push(path)
	    },
	  	onItemClick (index) {
	  		this.tabIndex = index
	  	},
	  	audiopay_logs () {
	  		audiopay_log().then((res) => {
	  			this.demands = res.data.info
	  		}).catch((err) => {
	  			console.log(err)
	  		})
	  	},
      videoDemands() {
        videoDemand().then((res) => {
          this.videoList = res.data.info
        }).catch((err) => {
          console.log(err)
        })
      }
	  }
	}
</script>
<style lang="stylus" scoped>
.demand
  background-color #fff
  min-width 100vw
  min-height 100vh
  .none
    img
      width 15.4rem
      position absolute
      left 50%
      margin-left -7.7rem
      top 50%
      margin-top -9.6rem
  .item-list
    display flex
    padding 2rem 0
    margin 0 1.5rem
    border-bottom 1px solid #e6e6e6
    .img
      width 12rem
      min-width 12rem
      max-width 12rem
      height 8rem
      border-radius .4rem
      overflow hidden
      position: relative
      margin-right 1.5rem
      img
        width 100%
        height 100%
      .mask-bg
        position absolute
        width 100%
        height 100%
        background-color rgba(0,0,0,.4)
        top 0
        left 0
        img
          width 2.7rem
          height 2.7rem
          position absolute
          left 50%
          top 50%
          margin-left -1.35rem
          margin-top -1.35rem
    .con
      position relative
      .tip
        color #333
        font-weight bold
        font-size 1.5rem
      .video-num
        display flex
        width 100%
        line-height 1.4rem
        font-size 1.2rem
        color #999
        position absolute
        bottom .3rem
        .time
          color #999
          font-size 1.2rem
          display flex
          min-width 50%
          img
            width 1.4rem
            height 1.4rem
            margin-right .8rem
</style>